/* eslint-disable space-before-function-paren */
<template>
  <li>
    <slot name="pre-icon" :value="value"></slot>
    <span class="red" v-if="!del">{{title}}</span>
    <span v-else style="text-decoration: line-through;">{{title}}</span>
    <slot name="suf-icon">😄</slot>
    <button v-show="!del" @click="handleClick">删除</button>
    <button v-show="del" @click="showClick">展示</button>
  </li>
</template>
<script>
export default {
  props: {
    title: String,
    del: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      value: Math.random()
    }
  },
  methods: {
    handleClick () {
      console.log('点击删除按钮')
      this.$emit('delete', this.title)
      this.del = true
    },
    showClick () {
      console.log('点击展示按钮')
      this.$emit('show', this.title)
      this.del = false
    }
  }
}
</script>
<style scoped>
.red{
  color:red;
}
</style>
